<template>
  <div>
    <van-nav-bar title="个人信息"
                 left-text="返回"
                 right-text="保存"
                 @click-right="handleSubmit"
                 @click-left="handleBack"
                 left-arrow />

    <van-cell-group>
      <van-field v-model="form.account"
                 required
                 clearable
                 label="姓名"
                 right-icon="question-o"
                 placeholder="请输入姓名"
                 @click-right-icon="$toast('question')" />
      <van-field v-model="form.email"
                 required
                 clearable
                 label="邮箱"
                 right-icon="question-o"
                 placeholder="请输入邮箱"
                 @click-right-icon="$toast('question')" />

      <van-field v-model="form.phone"
                 clearable
                 label="电话"
                 placeholder="请输入电话"
                 required />
      <van-field v-model="form.studentId"
                 clearable
                 label="学号"
                 placeholder="请输入学号" />
      <van-field v-model="form.school"
                 clearable
                 label="学校"
                 required
                 @focus="showSchoolSearch"
                 placeholder="请输入学校" />
      <van-field v-model="form.college"
                 clearable
                 label="学院"
                 placeholder="请输入学院" />
      <van-field v-model="form.major"
                 clearable
                 label="专业"
                 placeholder="请输入专业" />
      <van-field v-model="form.wechat"
                 clearable
                 label="微信"
                 placeholder="请输入微信"
                 required />
      <van-field v-model="form.qq"
                 clearable
                 label="QQ"
                 placeholder="请输入qq"
                 required />
    </van-cell-group>
    <van-actionsheet v-model="isShowCelectSchool"
                     title="输入学校名称查询">
      <van-search v-model="schoolName"
                  placeholder="请输入学校名"
                  show-action
                  @search="onSearchSchool">
        <div slot="action"
             @click="onSearchSchool">搜索</div>
      </van-search>
      <ul class="school-list">
        <li v-for="(school, index) in schools"
            :key="index"
            @click="selectedSchool(school)">
          {{school.name}}
        </li>
      </ul>
    </van-actionsheet>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      form: {
        account: undefined,
        email: undefined,
        phone: undefined,
        studentId: undefined,
        school: undefined,
        college: undefined,
        major: undefined,
        wechat: undefined,
        qq: undefined
      },
      isShowCelectSchool: false,
      schoolName: '',
      schools: []
    }
  },
  mounted () {
    this.form = Object.assign({}, this.user)
  },
  computed: {
    ...mapState({
      user: state => state.mine.user
    })
  },
  methods: {
    ...mapMutations(['SET_USER']),
    handleBack () {
      this.$emit('toggleEditPopup', false)
    },
    showSchoolSearch () {
      this.isShowCelectSchool = true
    },
    onSearchSchool () {
      this.$http.searchSchoolByName({
        schoolName: this.schoolName
      }).then(res => {
        this.schools = res.data
      })
    },
    selectedSchool (value) {
      this.form.school = value.name
      this.form.schoolId = value.id
      this.form.provinceId = value.provinceId
      this.school = value
      this.isShowCelectSchool = false
    },
    handleSubmit () {
      console.log(this.form)
      if (!this.user.userId) {
        this.$toast('请先登录！')
        return
      }

      if (!this.form.schoolId) {
        this.$toast('必填信息不能为空！')
      }
      const user = Object.assign({}, this.form)
      delete user._id
      console.log(user)
      this.$http.updateUser(user).then(res => {
        this.SET_USER(user)
        this.$toast(res.msg)
      })
    }
  }
}
</script>

<style>
</style>
